<template>
  <van-list
    v-model:loading="loading"
    :finished="finished"
    finished-text="没有更多了"
  >
    <van-cell
      v-for="memoItem in list"
      :key="memoItem.id"
      :title="memoItem.title"
      clickable
      @click="console.log('click the cell to open the single memo')"
    >
      <template #right-icon>
        <van-icon name="cross" @click.stop="deleteMemo(memoItem.id)" />
      </template>
    </van-cell>
  </van-list>
</template>

<script setup>
import { ref } from 'vue';
import { toast } from '@/utils/toastHelper';
import { useLocalStorage } from '@vueuse/core';

const list = useLocalStorage('memo-list', []);
const loading = ref(false);
const finished = ref(true);

function deleteMemo(id) {
  list.value = list.value.filter((memoItem) => memoItem.id !== id);

  toast('成功删除');
}
</script>
